<!-- 基础表格组件 -->
<template>
  <div class="baseList">
    <div class="tableBoxs">
      <div class="newBox">
        <button class="bt wt-120" @click="handleBulid()">新增护理项目</button>
      </div>
      <t-table
        :data="listData"
        :columns="COLUMNS"
        :row-key="rowKey"
        vertical-align="middle"
        :hover="true"
        :loading="dataLoading"
        table-layout="fixed"
        table-content-width="100%"
        bordered
      >
      <!-- 图片 -->
      <template #image="{ row }">
        <div>
          <div class="tdesign-demo-image-viewer__base">
            <t-image-viewer :images="[row.image]" :closeOnEscKeydown="false">
              <template #trigger="{ open }">
                <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                  <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                  <div class="tdesign-demo-image-viewer__ui-image--hover">
                    <span><browse-icon size="1.4em" /> 预览</span>
                  </div>
                </div>
              </template>
            </t-image-viewer>
          </div>
        </div>
      </template>
        <!-- 序号 -->
        <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
        <!-- end -->
        <!-- 护理费用 -->
        <template #fee="{ row }">{{
          isDecimals(row.fee) ? row.fee : row.fee + '.00'
        }}</template>
        <!-- end -->
        <!-- 操作栏 -->
        <template #op="{ row }">
          <div class="operateCon">
            <a class="btn-dl" :class="row.count > 0 ? 'disabled' : ''" @click="handleClickDelete(row)">删除</a>
            <a class="font-bt" :class="row.count > 0 ? 'disabled' : ''" @click="handleEdit(row)">编辑</a>
            <a class="delete" :class="row.count > 0 && row.status === 1
              ? 'disabled btn-dl'
              : row.status === 1
                ? 'btn-dl'
                : 'font-bt'
              " @click="handleForbidden(row)">{{ row.status === 1 ? '禁用' : '启用' }}</a>
          </div>
        </template>
        <!-- end -->
        <!-- 暂无数据 -->
        <template #empty>
          <NoData></NoData>
        </template>
        <!-- end -->
      </t-table>
      <!-- 分页 -->
      <t-pagination
        v-if="total>5"
        v-model="pagination.pageNum"
        v-model:pageSize="pagination.pageSize"
        :total="total"
        @change="onPageChange"
      />
      <!-- end -->
    </div>
  </div>
</template>

<script setup lang="ts">
// 表格
import { COLUMNS } from '../constants' // 表格列
// 校验
import { isDecimals } from '@/utils/validate'
// 无数据时显示的提示
import NoData from '@/components/noData/index.vue'
import { ref } from 'vue'
// 获取父级数据
const props = defineProps({
  // 列表数据
  listData: {
    type: Object,
    default: () => {
      return []
    }
  },
  // 总条数
  total: {
    type: Number,
    default: 0
  },
  // 分页
  pagination: {
    type: Object,
    default: () => ({})
  },
  // 加载状态
  dataLoading: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits([
  'handleEdit',
  'handleBulid',
  'handleClickDelete',
  'handleForbidden',
  'getCurrent'
])
// ------定义变量------
// 行的key
const rowKey = 'index'
const visible = ref(false);
// 禁用
const handleForbidden = (val) => {
  emit('handleForbidden', val)
}
// 打开编辑弹窗
const handleEdit = (row) => {
  if (row.cid === undefined || !row.cid) {
    emit('handleEdit', row)
  }
}
// 点击删除
const handleClickDelete = (row) => {
  if (row.cid === undefined || !row.cid) {
    emit('handleClickDelete', row)
    console.log(row.id);
  }
}
// 点击翻页
const onPageChange = (pageInfo) => {
  console.log(pageInfo);
  emit('getCurrent', pageInfo)
}
// 点击新建
const handleBulid = () => {
  emit('handleBulid')
}
</script>
